<template>
  <div
    class="share"
    v-loading="loading"
    element-loading-background="rgba(255, 255, 255, 0)"
  >
    <el-form ref="shareInfo" :model="shareInfo" label-width="120px">
      <el-form-item label="上传图片">
        <el-row>
          <el-col :span="5">
            <el-upload
              class="upload-demo"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :headers="headers"
              name="multipartFile"
              :multiple="false"
              :action="cfg.baseUrl + '/resource/upload?type=OTHER'"
              :show-file-list="false"
            >
              <div v-if="shareInfo.imageLink" class="imageLink_item">
                <el-image
                  style="border-radius: 4px; width: 100%; height: 100%"
                  :src="shareInfo.imageLink"
                  fit="cover"
                ></el-image>

                <div class="tips_wrap">
                  <span class="name">更换图片</span>
                  <div @click.stop="handleDeleteImg" class="delete_box">
                    <i class="el-icon-delete"></i>
                  </div>
                </div>
              </div>
              <el-button v-else size="small" type="primary"
                >+ 添加图片</el-button
              >
            </el-upload>
          </el-col>
          <el-col :span="4">
            <el-button size="small" @click="dialogVisible = true" type="primary"
              >查看示例</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="活动分享标题">
        <el-input
          v-model="shareInfo.title"
          type="textarea"
          placeholder="默认活动标题，创建后修改"
          @change="handleTitle"
        ></el-input>
      </el-form-item>
      <el-form-item label="选手分享标题">
        <el-input
          v-model="shareInfo.subTitle"
          type="textarea"
          placeholder="我是85号选手xxx，帮我投一票吧"
          @change="handleSubTitle"
        ></el-input>
      </el-form-item>
      <el-form-item label="分享内容">
        <el-input
          v-model="shareInfo.context"
          type="textarea"
          placeholder="快来为你喜欢的选手打call吧"
          @change="handleContext"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      title="示例展示"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <div class="share_box">
        <div class="head_wrap">设置 <span>可自定义更符合活动的文案</span></div>
        <div class="img_wrap">
          <el-image
            style="border-radius: 4px; width: 100%; height: 100%"
            :src="require('../../../../../assets/images/share1.png')"
            fit="cover"
          ></el-image>
        </div>
        <div class="effect_wrap">
          <div class="head_wrap">
            效果展示 <span>玩家分享到朋友圈或微信会话的内容即为自定义文案</span>
          </div>
          <div class="wechart_wrap img_wrap">
            <div class="share-item">
              <p>微信会话</p>
              <el-image
                style="border-radius: 4px; width: 100%; height: 195px"
                :src="require('../../../../../assets/images/share2.png')"
                fit="cover"
              ></el-image>
            </div>
            <div class="share-item">
              <p>朋友圈</p>
              <el-image
                style="border-radius: 4px; width: 100%; height: 195px"
                :src="require('../../../../../assets/images/share3.png')"
                fit="cover"
              ></el-image>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import cfg from "@/config";
import { LgetItem } from "@/utils/storage";
export default {
  data() {
    return {
      cfg,
      shareInfo: {},
      dialogVisible: false,
      headers: { Token: LgetItem("jwtToken") },
      copyInfo:{}
    };
  },
  computed: {
    ...mapGetters("status", {
      loading: "loading",
    }),
  },
  created() {
    this.getShare();
  },
  methods: {
    beforeUpload(file) {
      console.log(file);
      return true;
    },
    handleSuccess(res, file) {
      console.log(file);
      console.log(res);
      this.shareInfo.imageLink = res.data;
      this.saveApi();
    },
    getShare() {
      this.$api("vote.getShare", {
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.shareInfo = res;
        this.copyInfo=JSON.parse(JSON.stringify(res))
      });
    },
    saveApi() {
      this.$api("vote.saveShare", {
        ...this.shareInfo,
        title: this.shareInfo.title.trim(),
        subTitle: this.shareInfo.subTitle.trim(),
        context: this.shareInfo.context.trim(),
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.$store.commit("status/SET_URL", new Date().getTime());
        this.getShare();
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleTitle() {
      if (this.shareInfo.title.trim()) {
        this.saveApi();
      } else {
        this.$message({
          message: "活动分享标题不能为空",
          duration: 1000,
          type: "error",
        });
        this.shareInfo.title=this.copyInfo.title
      }
    },
    handleSubTitle() {
      if (this.shareInfo.subTitle.trim()) {
        this.saveApi();
      } else {
        this.$message({
          message: "选手分享标题不能为空",
          duration: 1000,
          type: "error",
        });
        this.shareInfo.subTitle=this.copyInfo.subTitle
      }
    },
    handleContext() {
      if (this.shareInfo.context.trim()) {
        this.saveApi();
      } else {
        this.$message({
          message: "分享内容不能为空",
          duration: 1000,
          type: "error",
        });
        this.shareInfo.context=this.copyInfo.context
      }
    },
    handleDelete() {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.shareInfo.imageLink = "";
          this.saveApi();
        })
        .catch(() => {});
    },
    handleDeleteImg() {
      this.shareInfo.imageLink = "";
      this.saveApi();
    },
  },
};
</script>

<style lang="scss" scoped>
.share {
  width: 820px;
  min-height: 550px;
  ::v-deep.el-form-item__label {
    padding-right: 30px;
  }
  ::v-deep.el-textarea__inner {
    height: 80px;
    border-radius: 30px;
    resize: none;
  }
  .el-row {
    width: 100%;
    .el-button {
      width: 100px;
      height: 30px;
      line-height: 0.5;
    }
  }
  .imageLink_item {
    border-radius: 4px;
    width: 120px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    .tips_wrap {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 6;
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0);
      opacity: 0;
      .delete_box {
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
        font-size: 13px;
      }
      &:hover {
        .delete_box {
          opacity: 1;
          color: #fff;
          line-height: 20px;
          &:hover {
            color: #ee6869;
          }
        }
        opacity: 1;
        background: rgba(0, 0, 0, 0.5);
        .name {
          color: $themeColor;
          font-size: 13px;
          line-height: 20px;
        }
        .tips {
          color: #fff;
          font-size: 13px;
          line-height: 20px;
        }
      }
    }
  }
}
.share_box {
  .effect_wrap {
    margin-top: 20px;
  }
  .head_wrap {
    font-size: 18px;
    span {
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .img_wrap {
    margin: 20px 0 0;
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }
  .wechart_wrap {
    display: flex;
    justify-content: space-around;
    .share-item {
      width: 244px;
      text-align: center;
    }
  }
}
</style>
